const itme_li = document.querySelector(".itme_li");
const itme_li_dis = document.querySelector(".itme_li_dis");
const qr_itme_li = document.querySelector(".qr_itme_li");
const qr_itme_img = document.querySelector(".qr_itme_img");
const SecondaryMenu = document.querySelectorAll(".SecondaryMenu");
const direction = document.querySelectorAll(".direction")
const submenu = document.querySelectorAll(".submenu");
const menu = document.querySelector(".menu");
const page = document.querySelector(".page");
const nav = document.querySelector(".categorise_nav");


itme_li.onmouseenter = function(){
    itme_li_dis.style.display = "block";
    itme_li.onmouseleave = function(){
        itme_li_dis.style.display = "none";
    }
}
qr_itme_li.onmouseenter = function(){
    qr_itme_img.style.display = "block";
    qr_itme_li.onmouseleave = function(){
        qr_itme_img.style.display = "none";
    }
}
nav.onmouseenter = function(){
    page.style.display = "block";
    nav.onmouseleave = function(){
        page.style.display = "none";
    }
}
page.onmouseenter = function(){
    page.style.display = "inline-block";
    page.onmouseleave = function(){
        page.style.display = "none";
    }
}
for(var j=0;j<submenu.length;j++){
    submenu[j].index = j;
    submenu[j].onmouseenter = function(){
        // for( let i = 0;i<submenu.length;i++){
        //     direction[i].style.display = "none";
        //     SecondaryMenu[i].style.display = "none";
        // }
        direction[this.index].style.display = "block";
        SecondaryMenu[this.index].style.display = "block";
        SecondaryMenu[this.index].style.top = this.index * SecondaryMenu[this.index].offsetWidth/25+"px";
    }
    submenu[j].onmouseleave = function(){
        for(var j=0;j<submenu.length;j++){
            direction[j].style.display = "none";
            SecondaryMenu[j].style.display = "none";
        }
    }
}
SecondaryMenu.onmouseenter = function(){
    SecondaryMenu.style.display = "block";
    SecondaryMenu.onmouseleave = function(){
        SecondaryMenu.style.display = "none";
    }
}
// 下拉菜单
class Drop{
    constructor(ops){
        this.ospan = ops.ospan;
        this.oul = ops.oul;
        this.oli = ops.oli;
        this.xh = 5;
        this.flag = 0;
        this.addEvent();
    }
    addEvent(){
        let _this = this;
        for(let i=0;i<this.oli.length;i++){
            this.oli[i].className = "";
        }
        this.oli[this.xh].className = "active";
        this.ospan.addEventListener("click",function(eve){
            eve.stopPropagation();
            if(_this.flag === 0){
                _this.oul.style.display = "block";
                for(var j=0;j<_this.oli.length;j++){
                    _this.oli[j].className = "";
                }
                // _this.oli[_this.xh].className = "active";
                // console.log(_this.oli[_this.xh].className)
                _this.flag = 1;
            }else{
                _this.oul.style.display = "none";
                _this.flag = 0;
            }
        })
        this.propag();
    }
    propag(){
        let _this = this;
        document.onclick = function(){
            _this.oul.style.display = "none";
        }
        this.move();
    }
    move(){
        let _this = this;
       for(var i=0;i<this.oli.length;i++){
            this.oli[i].index = i;
            this.oli[i].onmousemove = function(){
                for(var j=0;j<_this.oli.length;j++){
                    _this.oli[j].className = "";
                }
                this.className = "active";
            }
            this.oli[i].onclick = function(){
                _this.ospan.innerHTML = this.innerHTML;
                _this.xh = _this.index;
            }
       } 
    }
} 
new Drop({
    ospan:document.querySelector(".area_cen span"),
    oul:document.querySelector(".area_cen ul"),
    oli:document.querySelectorAll(".area_cen ul li")
})


// 商品数量
class Quantity{
    constructor(ops){
        this.les = ops.les;
        this.num = ops.num;
        this.pus = ops.pus;
        this.addEvent();
    }
    addEvent(){
        let _this = this;
        this.les.onclick = function(eve){
            let e = eve || window.event;
            e.preventDefault();
            if(_this.num.innerHTML === "1"){
                _this.num.innerHTML = 1;
            }else{
                _this.num.innerHTML--;
            }
        }
        let nm = Number(_this.num.innerHTML)
        this.pus.addEventListener("click",function(eve){
            let e = eve || window.event;
            e.preventDefault();
            nm++
            _this.num.innerHTML = nm;
        })
    }
}
new Quantity({
    les:document.querySelector(".Less"),
    num:document.querySelector(".num"),
    pus:document.querySelector(".push")
})
// 加入 购买
class JoinBuy{
    constructor(ops){
        this.jon = ops.jon;
        this.buy = ops.buy;
        this.Jspn = ops.Jspn;
        this.Bspn = ops.Bspn;
        this.addEvent();
    }
    addEvent(){
        const _this = this;
        let flag = 0;
        this.jon.addEventListener("click",function(){
            if(flag === 0){
                _this.Jspn.style.display = "block";
                flag = 1;
            }else{
                _this.Jspn.style.display = "none";
                flag = 0
            }
        })
        let fg = 0;
        this.buy.addEventListener("click",function(){
            if(fg === 0){
                _this.Bspn.style.display = "block";
                fg = 1;
            }else{
                _this.Bspn.style.display = "none";
                fg = 0
            }
        })
    }
}
new JoinBuy({
    jon:document.querySelector(".join"),
    buy:document.querySelector(".buy"),
    Jspn:document.querySelector(".join_span"),
    Bspn:document.querySelector(".buy_span"),
})

// 渲染页面
function request(ops){
    let {url,type="get",data={},success,error,filedName="",timeout=1000,dataType="text"} = ops;
    
    let str = "";
    for(let i in data){
        str+=`${i}=${data[i]}&`;
    }
    if(type !== "post"){
        url = url+"?"+str+"_yxm_="+Date.now();
    }
    
    let xhr;
    if(type !== "jsonp"){
        xhr = new XMLHttpRequest();
        xhr.open(type,url);
        xhr.onload = function(){
            if(xhr.status === 200){
                const res = dataType==="json"?JSON.parse(xhr.responseText):xhr.responseText;
                success && success(res);
                error = null;
                success = null;
            }else{
                error && error(xhr.status);
                success = null;
                error = null;
            }
        }
        if(type==="get"){
            xhr.send();
        }else{
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(str);
        }
    }else{
        let script = document.createElement("script");
        script.id = "sit";
        script.src = url;
        document.body.appendChild(script);
        window[data[filedName]] = function(res){
            res = dataType === "json"?JSON.parse(res):res;
            success && success(res);
            script && script.remove();
            error = null;
            success = null;
        }
    }
    setTimeout(()=>{
        error && error("timeout");
        const sit = document.getElementById("sit");
        sit && sit.remove();
        success = null;
        error = null;
    },timeout)
    }
    request({
        url:"../data/commodity.json",
        success:(res)=>{
            console.log(res);
        },
        dataType:"json",
        type:"jsonp"
    })
    
// 通过地址栏的id渲染详情页
;(function(){
    const id = location.search.split("=")[1];
    // 小图片的img
    const smlbox = document.querySelector(".smlbox img");
    // 大图片盒子
    const bigimg = document.querySelector(".bigimg img");
    // 商品标题标题盒子
    const com_tie = document.querySelector(".comm_title");
    // 商品的样式盒子
    const magier = document.querySelector(".magnifier");
    // 商品的现价
    const price = document.querySelector(".price");
    // 商品的原价
    const price2 = document.querySelector("._price");
    // 商品名
    const text = document.querySelector(".title_text");
    // 商品的出版社
    const publishing = document.querySelector(".publishing");
    ajaxGet(
        "http://localhost:2926/api?type=proList",
        res=>{
            res = JSON.parse(res);
            let i = 0;
            res.data.some((val,idx)=>{
                i = idx;
                return val.proId === id;
            })
            // console.log(res.data[i])
            // 放大镜图
            smlbox.src = bigimg.src = res.data[i].url;
            // 商品标题
            com_tie.innerHTML = `<span>${res.data[i].name}</span>`;
            // 商品的样式
            magier.innerHTML = `<li><img src="${res.data[i].url}" alt=""></li>
                                <li><img src="${res.data[i].url1}" alt=""></li>
                                <li><img src="${res.data[i].url2}" alt=""></li>
                                <li><img src="${res.data[i].url3}" alt=""></li>
                                <li><img src="${res.data[i].url4}" alt=""></li>
                                <li><img src="${res.data[i].url5}" alt=""></li>
                                <li><img src="${res.data[i].url6}" alt=""></li>
                                <li><img src="${res.data[i].url}" alt=""></li>`;
            // 商品的原价
            price2.innerHTML = `￥${res.data[i].voided_price}`;
            // 商品的现价
            price.innerHTML = `￥${res.data[i].price}`;
            // 商品名
            text.innerHTML = res.data[i].name;
            // 商品出版社
            publishing.innerHTML = res.data[i].publishing;
        }
    )
})();